<script setup>
import { useRequest } from '@/hooks/requestHooks.js';
import { getEntLists, getEntSubList } from '@/api/index.js';

const props = defineProps({
  isDefaultSelect: { type: Boolean, default: () => true },
});
const emit = defineEmits(['codeEmit']);
const entCode = ref(null);
const entSubCode = ref(null);
const [entList] = useRequest(getEntLists, {
  onSuccess: res => {
    if (res.data?.length > 0 && props.isDefaultSelect) {
      entCode.value = res.data[0].enterpriseCode;
      run({ enterPriceCode: entCode.value });
    }
  },
});
const [entSubList, loading, run] = useRequest(getEntSubList, {
  defaultParams: [{ enterPriceCode: null }],
  manual: true,
  onSuccess: res => {
    if (res.data?.length > 0 && props.isDefaultSelect) {
      entSubCode.value = res.data[0].buildingCode;
      checkedChange(entSubCode.value);
    }
  },
});
const handleEntChange = () => {
  entSubCode.value = null;
  run({ enterPriceCode: entCode.value });
};
const checkedChange = val => {
  emit('codeEmit', { enterpriseCode: entCode.value, buildingCode: val });
};
</script>

<template>
  <div class="u-h100">
    <div class="engConsumeRep-select">
      <el-select
        v-model="entCode"
        :popper-append-to-body="false"
        filterable
        placeholder="请选择"
        size="small"
        class="entList-select u-w100"
        @change="handleEntChange"
      >
        <el-option
          v-for="item in entList"
          :key="item.enterpriseCode"
          :label="item.enterpriseName"
          :value="item.enterpriseCode"
          :title="item.enterpriseName"
        >
          <span>{{ item.enterpriseName }}</span>
        </el-option>
      </el-select>
    </div>
    <div class="u-divider-bg" style="height: 1px"></div>
    <div v-loading="loading" class="u-p20 engConsumeRep-selectList">
      <el-radio-group v-show="entSubList?.length > 0" v-model="entSubCode" @input="checkedChange" class="u-w100">
        <div v-for="item in entSubList" :key="item.buildingCode" class="u-mb10">
          <el-radio :label="item.buildingCode" :title="item.buildingName" class="u-df-st">
            {{ item.buildingName }}
          </el-radio>
        </div>
      </el-radio-group>
      <div v-show="entSubList?.length <= 0" class="u-df-ct u-fs14 u-sec-text">暂无数据</div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.engConsumeRep-select {
  box-sizing: border-box;
  width: 100%;
  padding: 20px;
}
.engConsumeRep-selectList {
  height: calc(100% - 73px);
  overflow-y: auto;
}
:deep(.el-radio) {
  display: flex;
}
:deep(.el-radio__label) {
  width: 100%;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.entList-select :deep(.el-select-dropdown__item) {
  width: 100%;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.entList-select :deep(.el-select-dropdown) {
  width: 100%;
}
</style>
